<template>
    <div class="medium">
        <span>退货商品</span>
        <table style="width: 1038px;" cellspacing="0">
            <th style="background:#fff;">商品图片</th>
            <th style="background:#fff;">商品名称</th>
            <th style="background:#fff;">价格/货号</th>
            <th style="background:#fff;">属性</th>
            <th style="background:#fff;">数量</th>
            <th style="background:#fff;">小计</th>
            <tbody>
                <td class="img"><el-image style="width: 80px; height: 80px" :src="list.productPic" /></td>
                <td> {{ list.productName }}<br /> 品牌:{{ list.productBrand }}</td>
                <td>价格：￥{{ list.productPrice }}<br /> 货号:NO.{{ list.productId }}</td>
                <td>{{ list.productAttr }}</td>
                <td>{{ list.productCount }}</td>
                <td>￥{{ list.productPrice }}</td>
            </tbody>
        </table>
        <div style="float: right; margin: 20px ;">合计：<span style="color:#f56c6c;">￥{{ list.productRealPrice }}</span></div>
    </div>
    <div class="wrap">
        <span>服务信息</span>
        <div class="form-container-border">
            <div class="el-row">
                <div class="el-col">服务单号</div>
                <div class="font-small">{{list.id}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">申请状态</div>
                <div class="font-small" v-if="list.status===0">待处理</div>
                <div class="font-small" v-else-if="list.status===1">退货中</div>
                <div class="font-small" v-else-if="list.status===2">已完成</div>
                <div class="font-small" v-else-if="list.status===3">已拒绝</div>
            </div>
            <div class="el-row">
                <div class="el-col">订单编号 </div>
                <div class="font-small">
                    {{list.orderSn}} <button type="button"
                        class="el-button el-button--text el-button--small" @click="router.push('/oms/orderDetail?id=' + list.orderId)"><span>查看</span></button></div>
            </div>
            <div class="el-row">
                <div class="el-col">申请时间</div>
                <div class="font-small">{{ formateDate(list.createTime) }}</div>
            </div>
            <div class="el-row">
                <div class="el-col">用户账号</div>
                <div class="font-small">{{list.memberUsername}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">联系人</div>
                <div class="font-small">{{list.returnName}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">联系电话</div>
                <div class="font-small">{{list.returnPhone}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">退货原因</div>
                <div class="font-small">{{list.reason}}</div>
            </div>
            <div class="el-row">
                <div class=" el-col">问题描述</div>
                <div class="font-small">{{list.description}}</div>
            </div>
            <div class="el-row">
                <div class="el-col" style="height: 100px; line-height: 80px;">凭证图片 </div>
                <div class="font-small" style="height: 100px;">
                    <img src="" style="width: 80px; height: 80px;">
                </div>
            </div>
        </div>
        <div class="form-container-border">
            <div class="el-row">
                <div class="el-col">订单金额</div>
                <div class="font-small">￥{{ list.productRealPrice }}</div>
            </div>
            <div class="el-row">
                <div class="el-col">确认退款金额</div>
                <div class="font-small">￥<el-input style="width: 200px;" v-model="list.returnAmount" disabled  /></div>
            </div>
            <div class="el-row">
                <div class="el-col">选择收货点</div>
                <div class="font-small"><el-select v-model="list.companyAddress.addressName" disabled /></div>
            </div>
            <div class="el-row">
                <div class="el-col">收货人姓名</div>
                <div class="font-small">{{ list.companyAddress.name }}</div>
            </div>
            <div class="el-row">
                <div class="el-col">所在区域</div>
                <div class="font-small">{{list.companyAddress.province}} {{list.companyAddress.region}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">详细地址</div>
                <div class="font-small">{{list.companyAddress.detailAddress}}</div>
            </div>
            <div class="el-row">
                <div class=" el-col">联系电话</div>
                <div class="font-small">{{list.companyAddress.phone}}</div>
            </div>
        </div>
        <div class="form-container-border">
            <div class="el-row">
                <div class="el-col">处理人员</div>
                <div class="font-small">{{list.handleMan}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">处理时间</div>
                <div class="font-small">{{formateDate(list.handleTime)}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">处理备注</div>
                <div class="font-small">{{list.handleNote}}</div>
            </div>
        </div> 
         <div class="form-container-border">
            <div class="el-row">
                <div class="el-col">收货人员</div>
                <div class="font-small">{{list.receiveMan}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">收货时间</div>
                <div class="font-small">{{formateDate(list.receiveTime)}}</div>
            </div>
            <div class="el-row">
                <div class="el-col">收货备注</div>
                <div class="font-small">{{list.receiveNote}}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getReturnApplyRoleIdApi } from './api';
import { formateDate } from '@/utils'
import { ref } from "vue"
import { useRoute,useRouter } from "vue-router"
const router = useRouter()
const route = useRoute()
const list = ref<ReturnApplyModel>({} as any)
if (route.query.id) {
    getReturnApplyRoleIdApi(parseInt(route.query.id as string)).then((res) => {
        if (res.code === 200) {
            list.value = res.data
        }

    })
}
</script>

<style lang="less" scoped>
.medium {
    width: 1078px;
    margin: 40px auto 0;
    padding:20px 20px 60px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    color: #303133;
    border-radius: 4px;

    table {
        margin: 20px auto 0;

        th {
            border: 1px solid #dcdfe6;
            padding: 10px;
            font-size: 14px;
            text-align: center;
            background: rgb(242, 246, 252);
            color: #909399;
        }

        td {
            border: 1px solid #dcdfe6;
            height: 60px;
            line-height: 40px;
            color: #606266;
            overflow: hidden;
            text-align: center;
        }
    }
}

.wrap {
    width: 1078px;
    margin: 18px auto 0;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
padding: 20px;
box-sizing: border-box;
    .form-container-border {
        width: 1038px;
        border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
        margin: 15px auto 0;

        .el-row {
            display: flex;
            align-items: center;
            .el-col {
                width: 25%;
                background: #f2f6fc;
                border-right: 1px solid #dcdfe6;
                border-bottom: 1px solid #dcdfe6;
                padding: 10px;
                font-size: 14px;
                color: #606266;
box-sizing: border-box;
            }

            .font-small {
                width: 75%;
                border-right: 1px solid #dcdfe6;
                border-bottom: 1px solid #dcdfe6;
                padding: 10px;
                font-size: 14px;
                color: #606266;
                box-sizing: border-box;
            }
        }
    }
}
</style>